<template>
	<div class="official-body">
		<div class="official-writing">
			<div class="editor-wrapper">
				<div class="editor-container">
					<Toolbar
						:editor="editor"
						:defaultConfig="toolbarConfig"
						:mode="mode"
					/>
					<Editor
						v-model="editorContent"
						:defaultConfig="editorConfig"
						:mode="mode"
						@onCreated="handleCreated"
						@onChange="handleChange"
						style="height: 500px;"
					/>
				</div>
				<div class="preview-container">
					<div class="preview-title">预览效果</div>
					<div class="preview-content" v-html="previewContent"></div>
				</div>
			</div>
			<div style="height: 100px;width: 100%;display: flex;align-items: center;justify-content: center;">
				<button @click="officialsubmit">提交</button>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	import axios from "@/api/apiaxios";
	import '@wangeditor/editor/dist/css/style.css';
	import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

	const editor = ref(null);
	const editorContent = ref('');
	const previewContent = ref('');
	const mode = ref('default');

	const toolbarConfig = {
		excludeKeys: ['fullScreen']
	};

	const editorConfig = {
		placeholder: '请输入文案',
		MENU_CONF: {}
	};

	const handleCreated = (editorInstance) => {
		editor.value = editorInstance;
	};

	const handleChange = (editorInstance) => {
		previewContent.value = editorInstance.getHtml();
	};

	function officialsubmit() {
		if (!editor.value) return;
		
		const content = editor.value.getHtml();
		console.log(content);
		
		const data = {
			txt: content
		};
		
		axios.post("/api/official/insert", data, {
			headers: {
				'Content-Type': 'application/json'
			}
		})
		.then(response => {
			console.log(response.data);
			if (response.data.code == 200) {
				alert("提交成功");
			} else {
				console.log('提交失败:', response.data.message);
			}
		})
		.catch(error => {
			if (error.response) {
				console.log('响应状态码:', error.response.status);
				console.log('响应数据:', error.response.data);
			} else if (error.request) {
				console.log('没有收到响应:', error.request);
			} else {
				console.log('错误信息:', error.message);
			}
		});
	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
		font-size: 14px;
		color: black;
	}

	.official-body {
		width: 100%;
		height: 100vh;
		// background-color: antiquewhite;
		display: flex;
		align-items: center;
		justify-content: center;

		.official-writing {
			width: 90%;
			height: 800px;
			display: flex;
			flex-direction: column;

			.editor-wrapper {
				display: flex;
				width: 100%;
				height: 600px;
				gap: 20px;

				.editor-container {
					flex: 1;
					width: 50%;
					display: flex;
					flex-direction: column;
					border: 1px solid #ccc;
					overflow: hidden;

					:deep(.w-e-toolbar) {
						border-bottom: 1px solid #ccc;
					}

					:deep(.w-e-text-container) {
						flex: 1;
						overflow-y: auto;
					}
				}

				.preview-container {
					width: 50%;
					border: 1px solid #ccc;
					padding: 10px;
					// overflow-y: auto;

					.preview-title {
						font-weight: bold;
						margin-bottom: 10px;
						padding-bottom: 10px;
						border-bottom: 1px solid #ccc;
					}

					.preview-content {
						height: calc(100% - 30px);
						overflow-y: auto;
					}
				}
			}

			button {
				margin: 20px 0;
				width: 200px;
				height: 50px;
				border-radius: 20px;
				border: none;
				cursor: pointer;
				background-color: aquamarine;
			}
		}
	}
</style>